function display(data) {
    console.log("displaying...")
    const word_cloud = document.querySelector('.word-cloud');
    word_cloud.src = "./new_word_cloud.png";
    word_cloud.style.width = "500px";
    word_cloud.style.height = "500px";
    word_cloud.alt = "new word cloud";

    const text_tendency = data.text_tendency;
    let left = 54 * text_tendency;
    let right = 54 * (5-text_tendency);

    const percent_box = document.querySelector(".percent-box");
    percent_box.width = "0";
    percent_box.height = "16px";
    percent_box.style.borderLeft = left + "px solid #fc8b2f";
    percent_box.style.borderRight = right + "px solid #4f9bfc";

    const container = document.querySelector(".keyword-analyse-body");
    container.innerHTML = '';

    const count = data.count;
    let keyword = null;
    let tendency = null;
    for (let i = 0; i < count; i++) {
        keyword = data.keyword[i];
        tendency = data.tendency[i];
        console.log(keyword, tendency);

        const element = document.createElement('div');
        element.className = "keyword-analyse-box";

        const sub_element = document.createElement('span');
        sub_element.className = "keyword";
        sub_element.textContent = keyword;
        element.appendChild(sub_element);

        const sub_element1 = document.createElement('img');
        sub_element1.className = "star";
        if (tendency > 0) {
            sub_element1.src = "./yellow_star.png";
        }
        else {
            sub_element1.src = "./gray_star.png";
        }
        sub_element1.alt = "";
        sub_element1.style.width = "30px";
        sub_element1.style.height = "30px"
        element.appendChild(sub_element1);
        tendency -= 1;

        const sub_element2 = document.createElement('img');
        sub_element2.className = "star";
        if (tendency > 0) {sub_element2.src = "./yellow_star.png";}
        else {sub_element2.src = "./gray_star.png";}
        sub_element2.alt = "";
        sub_element2.style.width = "30px";
        sub_element2.style.height = "30px"
        element.appendChild(sub_element2);
        tendency -= 1;

        const sub_element3 = document.createElement('img');
        sub_element3.className = "star";
        if (tendency > 0) {sub_element3.src = "./yellow_star.png";}
        else {sub_element3.src = "./gray_star.png";}
        sub_element3.alt = "";
        sub_element3.style.width = "30px";
        sub_element3.style.height = "30px"
        element.appendChild(sub_element3);
        tendency -= 1;

        const sub_element4 = document.createElement('img');
        sub_element4.className = "star";
        if (tendency > 0) {sub_element4.src = "./yellow_star.png";}
        else {sub_element4.src = "./gray_star.png";}
        sub_element4.alt = "";
        sub_element4.style.width = "30px";
        sub_element4.style.height = "30px"
        element.appendChild(sub_element4);
        tendency -= 1;

        const sub_element5 = document.createElement('img');
        sub_element5.className = "star";
        if (tendency > 0) {sub_element5.src = "./yellow_star.png";}
        else {sub_element5.src = "./gray_star.png";}
        sub_element5.alt = "";
        sub_element5.style.width = "30px";
        sub_element5.style.height = "30px"
        element.appendChild(sub_element5);
        tendency -= 1;

        container.appendChild(element);
    }


    //
    // const word_cloud_rect = document.querySelector(".word-cloud_rect");
    // word_cloud_rect.innerHTML = '';
    // const word_cloud = document.createElement('img');
    // word_cloud.className = "word-cloud";
    // word_cloud.src = "./yellow_star.png";
    // word_cloud.style.width = "400px";
    // word_cloud.style.height = "400px";
    // word_cloud.alt = "";
    // word_cloud_rect.appendChild(word_cloud);
}


function sendCommentForAnalysis() {
    console.log("clicked");
    const commentTextarea = document.querySelector(".comment-textarea");
    const comment = commentTextarea.value;
    const data = {
        comment: comment
    };
    fetch('http://127.0.0.1:8000/api/process', {
        method: 'POST',
        headers: {'Content-Type': 'application/json',},
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {display(data);})
}